<template>
  <div class="">
    <v-header></v-header>
    <div class="all">
      <div class="crumbs">
        <span>首页</span>
        <span>></span>
        <span>同步课堂</span>
        <span>></span>
        <span>视频详情</span>
      </div>
    </div>
    <!-- 主体内容 -->
    <main>
      <div class="classDetail" id="classDetail">
        <div class="left">
          <img :src="$host + list.image_src" alt="" />
        </div>
        <div class="right">
          <p class="title">{{ list.title }}</p>
          <ul>
            <li>年级科目：{{ list.subject_name }}</li>
            <li>地区：{{ list.area_name }}</li>
            <li>年级:{{ list.grade_name }}</li>
            <li>开课时间：<br />{{ list.courseIntro }}</li>
            <li class="price">
              <span>{{ list.price }}</span>
              <span>
                {{ list.price == 0 ? "免费学习" : list.price + "元报名" }}</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="row introduce" id="introduce">
        <p>授课师资</p>
        <div class="left">
          <p class="img">
            <img :src="$host + list.herd_photo_url" alt="" />
          </p>
          <p class="right">
            <span>{{ list.realname }}</span>
            <span>小U课堂高级讲师</span>
          </p>
        </div>
        <div class="right">{{ list.teacherIntro }}</div>
      </div>
      <div class="row title">
        <span class="active">课程目录</span><span>课程详情</span>
      </div>
      <div class="classlist active">
        <div class="content">
          <div class="detail">
            <!-- <ul class="active" id="videoDetail">
              <li onclick="videoPlay(1)">
                <p>
                  <i class="iconfont icon-bofang"></i>
                  <span>第{{arr.vnum}}节：{{ arr.video_title }}</span>
                </p>
                <p>2020.12.10 20：00开播</p>
              </li>
            </ul> -->
          </div>
        </div>
        <div class="bottom"></div>
      </div>
      <div class="classlist">
        <img src="../assets/img/videoDetail/detail.png" alt="" />
      </div>
    </main>
    <v-footer></v-footer>
  </div>
</template>

<script>
import { getdetail } from "@/http/api";
import vHeader from "@/components/vHeader.vue";
import vFooter from "@/components/vFooter.vue";
export default {
  components: { vHeader, vFooter },
  name: "",
  data() {
    return {
      list: [],
      arr:[]
    };
  },
  created() {
    let cid = this.$route.query.cid;
    getdetail({ cid }).then((res) => {
      console.log(res);
      this.list = res.data;
    });
  },
  // async mounted(){
  //   let a=await this.list()
  //   console.log(a);
  //   this.list = e.data;
  // }
};
</script>

<style scoped>
.all {
  width: 100%;
  height: 60px;
}
.all .crumbs {
  width: 1180px;
  height: 60px;
  line-height: 60px;
  text-align: left;
  margin: 0 auto;
  padding-left: 20px;
}
.all .crumbs span {
  margin-right: 20px;
  color: #333;
  font-size: 14px;
}
.all .crumbs span:nth-child(2n) {
  color: #000;
}
main {
  background: #fafafa;
}
main .classDetail {
  width: 1180px;
  height: auto;
  margin: 0 auto;
}
main .classDetail::after {
  display: block;
  content: "";
  clear: both;
}
main .classDetail div {
  float: left;
}
main .classDetail .left {
  padding: 20px;
  box-sizing: border-box;
  width: 800px;
  height: 550px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}
main .classDetail .left img,
main .classDetail .left video {
  width: 100%;
  height: 100%;
}
main .classDetail .right {
  margin-left: 35px;
  padding-top: 70px;
}
main .classDetail .right .title {
  font-size: 22px;
  color: #333;
  font-weight: Semibold;
  line-height: 30px;
  font-family: PingFangSC-Semibold, PingFang SC;
}
main .classDetail .right ul {
  margin-top: 20px;
}
main .classDetail .right ul li {
  font-size: 14px;
  color: #333;
  line-height: 20px;
  font-weight: Regular;
  margin-bottom: 10px;
}
main .classDetail .right ul li span {
  color: #f66;
  margin-right: 5px;
}
main .classDetail .right ul li.price {
  margin-top: 83px;
  vertical-align: top;
}
main .classDetail .right ul li.price span {
  font-size: 36px;
  line-height: 50px;
  color: #80c4ae;
}
main .classDetail .right ul li.price span:first-child {
  font-family: PingFangSC-Semibold, PingFang SC;
}
main .classDetail .right ul li.price span:last-child {
  border: 2px solid #80c4ae;
  margin-left: 31px;
  border-radius: 4px;
  font-size: 14px;
  display: inline-block;
  width: 130px;
  height: 48px;
  padding-left: 33px;
  cursor: pointer;
}
main .classDetail .right ul li.sale {
  width: 260px;
  height: 48px;
  padding-top: 13px;
  padding-left: 15px;
  background: #80c4ae;
  font-family: PingFangSC-Semibold, PingFang SC;
  border-radius: 4px;
}
main .classDetail .right ul li.sale span {
  color: #fff;
}
main .classDetail .right ul li.sale span:first-child {
  border-right: 1px solid #fff;
  padding-right: 25px;
  margin-right: 25px;
}
main .row {
  width: 1180px;
  height: auto;
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  height: 156px;
  margin-top: 20px;
  padding-top: 20px;
  padding-left: 20px;
  vertical-align: top;
  padding-right: 25px;
}
main .row > p {
  width: 80px;
  height: 28px;
  font-size: 20px;
  font-weight: 400;
  color: #333333;
  line-height: 28px;
  margin-bottom: 20px;
}
main .row .left {
  width: 265px;
  float: left;
}
main .row .left p.img {
  width: 62px;
  height: 62px;
  background: #d8d8d8;
  border-radius: 50%;
  margin-left: 9px;
  margin-right: 20px;
  float: left;
}
main .row .left p.img img {
  width: 62px;
  height: 62px;
}

main .row .left p.right {
  width: 154px;
  height: 56px;
  font-size: 16px;
  font-weight: 400;
  color: #333333;
  line-height: 22px;
  float: left;
  border-right: 1px solid #80c4ae;
  padding-right: 30px;
}
main .row .left p.right span {
  display: inline-block;
  width: 124px;
  font-size: 16px;
}
main .row .left p.right span:first-child {
  font-size: 18px;
  color: #333;
  margin-bottom: 10px;
}
main .row .left::after {
  display: block;
  content: "";
  clear: both;
}
main .row .right {
  color: #333;
  font-size: 16px;
  line-height: 22px;
  vertical-align: top;
  text-align: left;
  width: 870px;
  float: left;
}
main .row.title {
  height: 66px;
  text-align: center;
  padding-top: 0;
  border-radius: 0;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 9999;
}
main .row.title span {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  color: #333333;
  line-height: 66px;
  width: 80px;
  height: 66px;
  margin-right: 20px;
  cursor: pointer;
}
main .row.title span.active {
  background: #80c4ae;
  color: #fff;
}
main .classlist {
  width: 1180px;
  margin: 0 auto;
  height: auto;
  padding: 30px 40px 0;
  background: #fff;
  position: relative;
  z-index: 999;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
  display: none;
}
main .classlist .detail {
  width: 100%;
}
main .classlist .detail p.title {
  display: block;
  height: 22px;
  font-size: 16px;
  font-weight: 500;
  color: #333333;
  line-height: 22px;
  margin-bottom: 23px;
  cursor: pointer;
}
main .classlist .detail p.title i {
  margin-left: 900px;
  font-size: 12px;
  color: #999;
}
main .classlist .detail ul {
  display: none;
}
main .classlist .detail ul.active {
  display: block;
}
main .classlist .detail ul li {
  display: block;
  line-height: 20px;
  overflow: hidden;
  padding-top: 8px;
  box-sizing: border-box;
  height: 41px;
}
main .classlist .detail ul li:hover {
  background: rgba(128, 196, 174, 0.2);
  color: #80c4ae;
}
main .classlist .detail ul li::after {
  display: block;
  content: "";
  clear: both;
}
main .classlist .detail ul li p {
  float: left;
}
main .classlist .detail ul li p i {
  margin-right: 15px;
  color: #80c4ae;
  font-size: 16px;
}
main .classlist .detail ul li p span {
  width: 219px;
  height: 20px;
  font-size: 14px;
  font-weight: 400;
  width: auto;
  cursor: pointer;
}
main .classlist .detail ul li p span.start {
  width: auto;
  height: 30px;
  color: #74c6b3;
  border: 2px solid #74c6b3;
  border-radius: 4px;
  padding: 5px 22px;
  display: none;
  margin-right: 15px;
  margin-top: -3px;
}
main .classlist .detail ul li p:last-child {
  float: right;
}
main .classlist .bottom {
  text-align: center;
  width: 1180px;
  height: 159px;
  background: #fafafa;
  line-height: 159px;
  margin-left: -40px;
}
main .classlist .bottom .seeAll {
  font-size: 22px;
  font-weight: 600;
  color: #74c6b3;
  text-decoration: underline;
}
main .classlist img {
  width: 100%;
  height: auto;
}
main .classlist.active {
  display: block;
}
</style>
